<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="box">
        <p class="p1">不凡学院</p>
        <p class="p2">hello</p>
    </div>
    <input class="input" type="text" value="hello">
    <button class="btn1 ">改变p1内容</button>
    <button class="btn2" onclick="insertPHTML()">插入p标签</button>
    <button onclick="insertInputValue()">插入输入框的内容</button>
    <script>
        var boxEl = document.querySelector('.box');
        var p1El = document.querySelector('.p1');
        var inputEl = document.querySelector('.input');
        var btn1 = document.querySelector('.btn1');
        var btn2 = document.querySelector('.btn2');

        // 改变P的内容
        btn1.onclick = function (){
            var inputValue = inputEl.value;
            // console.log(inputValue);
            p1El.innerText = inputValue;
            console.log(p1El.innerText);
        }
    
        // 插入P标签
        btn2.onclick = function (){
            var pEl = document.createElement('p');
            pEl.classList.add('p3');
            console.log(pEl);
            pEl.innerText = '这是P标签';
            boxEl.appendChild(pEl);
        }

        // 插入输入框的内容
        function insertInputValue(){
            var inputValue = inputEl.value;
            p1El.innerText = inputValue;
            console.log(p1El.innerText);
        }



    </script>
</body>

</html>